<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火游游戏商城</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<nav class="navbar navbar-expand-md bg-black navbar-black">
    <div class="container">
        <a href="#" class="navbar-brand text-light"><i class="bi bi-fire"></i></a>
        <button class="navbar-toggler " type="button" data-bs-toggle="collapse"data-bs-target="#navmenu">
            <span class="navbar-toggler-icon text-light"></span>
        </button>

        <div class="collapse navbar-collapse" id="navmenu">
            <ul class="navbar-nav mr-auto align-items-center ">
                <form action="http://localhost:9300/game/search" method="get">
                    <input type="text" name="key" class="form-control bg-black border-0 font-weight-bold text-light" id="search-input" placeholder="Search..."></input>
                    <button type="submit" class="btn btn-black text-light"><i class="bi bi-search"></i></button>

                </form>

            </ul>
            <ul class="navbar-nav ms-auto ">
                <li class="nav-item" th:if="${session.loginUser!=null}"><div class="nav-link"><a href="#" class="navbar-brand text-light"><i class="bi bi-robot"></i>欢迎！[[${session.loginUser.nickname}]]</a></div></li>
                <li class="nav-item" th:if="${session.loginUser!=null}"><div class="nav-link"><img  style="width: 30px;height: 30px"  th:src="${session.loginUser.header}"></div></li>
                <li class="nav-item" th:if="${session.loginUser!=null}"><div class="nav-link"><a href="http://localhost:9100/quit" class="navbar-brand text-light"><i class="bi bi-door-open"></i>退出</a></div></li>
                <li class="nav-item" th:if="${session.loginUser!=null}"><div class="nav-link"><a href="http://localhost:9200/tomygame" class="navbar-brand text-light"><i class="bi bi-cart"></i>我的游戏库</a></div></li>


                <li class="nav-item" th:if="${session.loginUser==null}"><div class="nav-link"><a href="http://localhost:9100/login" class="navbar-brand text-light"><i class="bi bi-person"></i>登陆</a></div></li>
                <li class="nav-item" th:if="${session.loginUser==null}"><div class="nav-link"><a href="http://localhost:9100/register" class="navbar-brand text-light"><i class="bi bi-fingerprint"></i>注册</a></div></li>
                <li class="nav-item" th:if="${session.loginUser==null}"><div class="nav-link"><a href="http://localhost:9100/login" class="navbar-brand text-light"><i class="bi bi-cart"></i>我的游戏库</a></div></li>

                <li class="nav-item"><div class="nav-link"><a href="#" class="navbar-brand text-light"><i class="bi bi-phone-vibrate"></i>关于我们</a></div></li>
            </ul>
        </div>
    </div>
</nav>
<section class="bg-black" >
    <div class="container">
        <h1 class="font-weight-bold title text-light"><a href="http://localhost:9300"  class="navbar-brand">火游游戏商城</a></h1>
        <div class="row">
            <nav class="navbar navbar-expand-lg navbar-black bg-black pl-2 pr-2">
                <button class="navbar-black navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarsExplore" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse " id="navbarsExplore">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link text-light" href="http://localhost:9300">首页</a>
                        </li>
                        <li class="nav-item text-white" th:each="category:${categorys}">
                            <a class="nav-link text-light" th:href="'http://localhost:9300/category/gameList/'+${category.getCatId()}" th:text="${category.catName}"></a>
                        </li>

                    </ul>
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item"><div class="nav-link"><img style="width:80px;height:80px" src="https://edu-cbw-1.oss-cn-guangzhou.aliyuncs.com/16340863108760984.jpg"></div></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</section>

<!-- 头部信息 -->
<!-- 内容 -->
<section class="pt-5" >
    <nav class="navbar navbar-expand-md ">
        <div class="container">
            <h1>为你搜索到[[${catName}]]的游戏：</h1>
        </div>
    </nav>
</section>
<section class="pt-5" >
    <div class="container">
        <table class="table table-hover">
            <tr th:each="game:${page.records}">
                <td><a style="text-decoration:none" th:href="'http://localhost:9300/game/gamedetail/'+${game.gameId}"><img style="width: 250px;height: 100px;" th:src="${game.gameDefaultImg}"></img></a></td>
                <td colspan="2"><h3 th:text="${game.gameName}">我的世界</h3><br/>
                    <h6 th:text="${game.gameTitle}">asfasdfasdfas</h6></td>
                <td style="text-align:right"><h1><i class="bi bi-currency-exchange"></i>[[${#numbers.formatDecimal(game.price,1,2)}]]</h1></td>
            </tr>

<!--            <tr>-->
<!--                <td><a style="text-decoration:none" href="#"><img style="width: 250px;height: 100px;" src="https://edu-cbw-1.oss-cn-guangzhou.aliyuncs.com/444a0bff4090f3651d126deb051c96a.jpg"></img></a></td>-->
<!--                <td colspan="2"><a style="text-decoration:none" href="#"><h3>我的世界</h3><br/>-->
<!--                    <h6>asfasdfasdfas</h6></a></td>-->
<!--                <td style="text-align:right"><h1><i class="bi bi-currency-exchange"></i>钱数</h1></td>-->
<!--            </tr>-->
        </table>
    </div>
</section>
<section class="pt-5 " th:if="${catName}">
    <div class="container">
        <nav aria-label="Page navigation example">
            <ul class="pagination pagination-lg justify-content-center">
                <li class="page-item" th:if="${page.current>1}">
                    <a class="page-link" th:href="'http://localhost:9300/category/gameList/'+${catId}+'?courrent='+${page.current-1}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li class="page-item" th:if="${page.current-1>=1}">
                    <a class="page-link" th:href="'http://localhost:9300/category/gameList/'+${catId}+'?courrent='+${page.current-1}"th:text="${page.current-1}">1</a></li>
                <li class="page-item"><a class="page-link" href="#" th:text="${page.current}">2</a></li>
                <li class="page-item" th:if="${page.current+1<=page.pages}"><a class="page-link" th:href="'http://localhost:9300/category/gameList/'+${catId}+'?courrent='+${page.current+1}" th:text="${page.current+1}">3</a></li>
                <li class="page-item" th:if="${page.current<page.pages}">
                    <a class="page-link" th:href="'http://localhost:9300/category/gameList/'+${catId}+'?courrent='+${page.current+1}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        </nav>
    </div>
</section>

<section class="pt-5 " th:if="${catName==null}">
    <div class="container">
        <nav aria-label="Page navigation example">
            <ul class="pagination pagination-lg justify-content-center">
                <li class="page-item" th:if="${page.current>1}">
                    <a class="page-link" th:href="'http://localhost:9300//game/search?courrent='+${page.current-1}+'&key='+${key}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li class="page-item" th:if="${page.current-1>=1}">
                    <a class="page-link" th:href="'http://localhost:9300//game/search?courrent='+${page.current-1}+'&key='+${key}"th:text="${page.current-1}">1</a></li>
                <li class="page-item"><a class="page-link" href="#" th:text="${page.current}">2</a></li>
                <li class="page-item" th:if="${page.current+1<=page.pages}"><a class="page-link" th:href="'http://localhost:9300//game/search?courrent='+${page.current+1}+'&key='+${key}" th:text="${page.current+1}">3</a></li>
                <li class="page-item" th:if="${page.current<page.pages}">
                    <a class="page-link" th:href="'http://localhost:9300//game/search?courrent='+${page.current+1}+'&key='+${key}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        </nav>
    </div>
</section>


<!-- 内容 -->
<!-- 脚部信息 -->

<section class="p-4">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
            <path class="bg-black" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"/>
            </svg>
    <footer class="bg-black pb-5">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md mr-4">
                    <i class="fas fa-copyright text-white"></i>
                    <small class="d-block mt-3 text-muted">©
                        <script>document.write(new Date().getFullYear())</script>
                        邮箱:<a target="_blank" href="#">384323898@qq.com</a>.
                    </small>
                </div>

                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">玩家交流</h5>
                    <ul class="list-unstyled text-small">
                        <li><img style="width: 200px;height: 200px;" src="https://edu-cbw-1.oss-cn-guangzhou.aliyuncs.com/444a0bff4090f3651d126deb051c96a.jpg" alt=""></li>

                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">加入我们</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="#">发行商入蛀</a></li>
                        <li><a class="text-muted" href="#">分销联盟</a></li>
                        <li><a class="text-muted" href="#">KOL合作</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">客户中心</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="#">在线时间：09:00-21:00</a></li>
                        <li><a class="text-muted" href="#">电话客服：18520413815</a></li>
                        <li><a class="text-muted" href="#">QQ客服：384323898</a></li>
                        <li><a class="text-muted" href="#">微信客服：18520413815</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">关于</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="#">关于火游</a></li>
                        <li><a class="text-muted" href="#">服务条款</a></li>
                        <li><a class="text-muted" href="#">售后服务</a></li>
                        <li><a class="text-muted" href="#">客服中心</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</section>
<!-- ---------------------------------------- -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
        crossorigin="anonymous"></script>
</body>
</html>